<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css"> 
#preview{width:200px;height:200px;border:1px solid #000;overflow:hidden;} 
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} 
</style> 
<script type="text/javascript"> 
function previewImage(file) 
{ 
  var MAXWIDTH  = 200; 
  var MAXHEIGHT = 200; 
  var div = document.getElementById('preview'); 
  if (file.files && file.files[0]) 
  { 
    div.innerHTML = '<img id=imghead>'; 
    var img = document.getElementById('imghead'); 
    img.onload = function(){ 
      var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); 
      img.width = rect.width; 
      img.height = rect.height; 
      img.style.marginLeft = rect.left+'px'; 
      img.style.marginTop = rect.top+'px'; 
    } 
    var reader = new FileReader(); 
    reader.onload = function(evt){img.src = evt.target.result;} 
    reader.readAsDataURL(file.files[0]); 
  } 
  else 
  { 
    var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; 
    file.select(); 
    var src = document.selection.createRange().text; 
    div.innerHTML = '<img id=imghead>'; 
    var img = document.getElementById('imghead'); 
    img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; 
    alert(img.offsetWidth+"---"+img.offsetHeight);// IE9中两次alert输出内容不同。第二次才是想要的，原理不懂
    alert(img.offsetWidth+"---"+img.offsetHeight);// IE9中两次alert输出内容不同。第二次才是想要的，原理不懂
    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); 
    status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); 
    div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>"; 
  } 
} 
function clacImgZoomParam( maxWidth, maxHeight, width, height ){ 
    var param = {top:0, left:0, width:width, height:height}; 
    if( width>maxWidth || height>maxHeight ) 
    { 
        rateWidth = width / maxWidth; 
        rateHeight = height / maxHeight; 
         
        if( rateWidth > rateHeight ) 
        { 
            param.width =  maxWidth; 
            param.height = Math.round(height / rateWidth); 
        }else 
        { 
            param.width = Math.round(width / rateHeight); 
            param.height = maxHeight; 
        } 
    } 
     
    param.left = Math.round((maxWidth - param.width) / 2); 
    param.top = Math.round((maxHeight - param.height) / 2); 
    return param; 
} 
</script>      
</head>      
<body>
	<div id="preview">
		<img id="imghead" width=200 height=200 border=0 src='/defaultImage/test.jpg'>
	</div>
	<form action="/ceshi/upFile" method="post" enctype="multipart/form-data">
		<input type="file" onchange="previewImage(this)" name="files"/><br>
		<input type="file" onchange="previewImage(this)" name="files"/>
		<!-- <input type="file" name="files"/><br>
		<input type="file" name="files"/><br>
		<input type="file" name="files"/><br> -->
		<input type="submit" value="提交"/>
	</form>

</body>
</html>